
<template>
    <el-row :gutter="20" style="box-sizing: border-box; margin-right: 0px;">
        <el-col :span="4" :offset="3">
            <ul class="menus is-always-shadow" >
                <li  v-for="category in categorys" :key="category.categoryId" @click="showDetail(category.categoryId,category.categoryName)">{{category.categoryName}}</li>
                <!-- <li @mouseenter="showDetail">手机 / 运营商 / 数码数码数码</li> -->
              
            </ul>
        </el-col>
        <el-col :span="13" style="position: relative;">
            <el-carousel height="300px" :interval="5000" arrow="always">
                <el-carousel-item v-for="shufflingImg in indexShufflingImg" :key="shufflingImg.imgId">
                    <el-image :src=shufflingImg.imgUrl></el-image>
                </el-carousel-item>
            </el-carousel>
            <div class="detail"  @mouseleave="hideDetail" v-show="isShowDetailOne">
                <div @mouseenter="isShowDetailOne = true" class="detail-item">
                    <h3 class="title">{{parentone}}</h3>
                    <div>
                        <el-link v-for="category in categorytwo" :key="category.categoryId"  @click="showDetailtwo(category.categoryId,category.categoryName)" :underline="false" class="item">{{category.categoryName}}</el-link> 
                    </div>
                </div>  
                <div class="detail-item" v-show="isShowDetailTwo">
                    <h3 class="title">{{parenttwo}}</h3>
                    <div>
                      <el-link v-for="category in categorythree" :key="category.categoryId"  @click="showDetailpro(category.categoryId)" :underline="false" class="item">{{category.categoryName}}</el-link> 
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import http from '@/core/HttpRequest.js'
export default {
    data: () => ({
        indexShufflingImg:[],
        categorys:[],
        categorytwo:[],
        categorythree:[],
        parentone:'',
        parenttwo:'',
        isShowDetailOne: false,
        isShowDetailTwo: false
    }),
    components: {
    },
    methods: {
        showDetail(categoryId,categoryName) {//二级目录
        this.parenttwo=''
        this.categorythree=''
          this.parentone=categoryName
          http.post('/home/twogoods', categoryId,).then(res=>{
             let message= res.data.data
            if(!message){
                this.$emit('choose')
            }
             
                this.categorytwo=message

            })
            this.isShowDetailOne = true
        },
        hideDetail() {
            this.isShowDetailOne = false
        },
        handleCommand(command) {
        this.$message('click on item ' + command);
      },
      showDetailtwo(categoryId,categoryName){//三级目录
        this.parenttwo=categoryName
        http.post('/home/twogoods', categoryId).then(res=>{
             let message= res.data.data
             if(message==''||message==null){
                this.$emit('choose')
             }
                this.categorythree=message
                
            })
        this.isShowDetailTwo=true
      },
      showDetailpro(categoryId){ 
          this.$emit('goods',categoryId)
      }

    },
     mounted(){
         http.post('/home/goods').then(res=>{
             let data=res.data.data
             this.indexShufflingImg=data.indexShufflingImg
             this.categorys=data.category
            
         }) 
         
  }
}
</script>

<style scoped>
ul.menus.is-always-shadow, .menus.is-hover-shadow:focus, .menus.is-hover-shadow:hover {
    -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
ul.menus {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 4px;
    border: 1px solid #EBEEF5;
    background-color: #FFF;
    overflow: hidden;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
    padding: 20px;
}
ul.menus > li {
    padding: 7px 0;
    cursor: pointer;
}
.detail {
    height: 100%;
    background-color: #f6f6f6;
    position:absolute;
    z-index: 9999;
    top: 0;
    width: 100%;
    left: -10px;
    padding: 20px;;
    box-sizing: border-box;
}
.detail .detail-item {
    margin-bottom: 10px;
}
.detail > .detail-item > .title {
    font-weight: 800;
    margin-bottom: 8px;
}
.detail > .detail-item .item {
    margin-right: 8px;
}
.detail > .detail-item .item:hover {
    color: #F56C6C;
}
</style>